<script lang="ts" setup>
import { useLocale } from '@/locale/locale';
import { RouteMap, useRouter } from '@/router';
import { ref } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { cancelOrder, getOrderDetail } from '@/api/car';
import { format } from 'date-fns';
import type { OrderDetails } from '@/types/carOrder';
import { useAuthStore } from '@/store/auth';
import AptCarOrderPackage from '@/components/apt-car-order-package/apt-car-order-package.vue';
import { usePopupStore } from '@/store/popup';
import AptCarRefundDetail from '@/components/apt-car-refund-detail/apt-car-refund-detail.vue';
import { CarOrderStatus } from '@/constants/orders';
import { isWechat } from '@/utils/platform';

// CREATE->CANCEL
// CREATE->HAVE PAID->CONFIRMED->DISPATCH(预约成功，司机已接单)->RE_DISPATCH(新司机已接单)  ADMIN_REFUND    SERVING(司机已到达出发地)   DONE(成功到达目的地)    RECEIVE(预约成功，司机已接单)->RE_RECEIVE(新司机已接单) RETURN(司机已退单)  TRANSFER(新司机已接单)

const { t } = useLocale();
const popupStore = usePopupStore();

const authStore = useAuthStore();
const router = useRouter();
const bottomZIndex = ref(10);
const qrcodePopupOpen = ref(false);
const qrcodePopupRef = ref();
const qrcodeRef = ref();
const carPackageTipsRef = ref();
const carOrderPackageRef = ref();
const carRefundDetailRef = ref();
const orderSn = ref('');
const orderInfo = ref<OrderDetails>();
const qrcodeOptions = ref({
  margin: 10
});
const processActiveStep = ref(0);

async function openQrcodePopup() {
  bottomZIndex.value = 9999;
  qrcodePopupOpen.value = true;
  qrcodePopupRef.value?.open();
  qrcodeRef.value.make();
}

function handleCloseQrcodePopup() {
  qrcodePopupOpen.value = false;
  qrcodePopupRef.value?.close();
}

function handleOpenCarPackageTips() {
  bottomZIndex.value = 10;
  if (orderInfo.value?.order_type == 'CRS') {
    carPackageTipsRef.value.open();
  } else {
    popupStore.openCarOrderPackage();
  }
}

async function getOrderInfo() {
  const res = await getOrderDetail(orderSn.value);
  //订单状态  WAIT_PAY：待支付  CONFIRM_DISAGREE：预定失败  CANCEL：已取消  WAIT_CONFIRM：待确认  WAIT_DISPATCH：待派单  OVERDUE：已逾期  ORDER_SUCCESS：预定成功   COMPLETE：已完成
  if (res.code == 0) {
    orderInfo.value = res.data.detail;

    res.data.detail.process.forEach((item: any) => {
      if (item.isActive) {
        processActiveStep.value++;
      }
    });

    const dateFormatArr = {
      zh: 'zh-CN',
      en: 'en-US',
      ja: 'ja-JP',
      ko: 'ko-KR',
      zh_CN: 'zh-TW'
    };
  } else {
    uni.navigateBack();
  }
}

function copyOrderNo() {
  uni.setClipboardData({
    data: orderInfo.value!.order_sn,
    success: function () {
      uni.showToast({
        title: 'success',
        icon: 'none'
      });
    }
  });
}

function contactDriver() {
  let contactTab = [t('LKey_onlineService')];
  if (orderInfo.value?.driver_info?.phone) {
    contactTab.unshift(
      t('LCKey_ByPhone') +
        '：' +
        orderInfo.value?.driver_info?.phone_area +
        orderInfo.value?.driver_info?.phone
    );
  }
  uni.showActionSheet({
    itemList: contactTab,
    success: function (res) {
      if (orderInfo.value?.driver_info?.phone) {
        if (res.tapIndex == 0) {
          if (orderInfo.value?.driver_info?.phone) {
            uni.makePhoneCall({
              phoneNumber:
                orderInfo.value?.driver_info?.phone_area + orderInfo.value?.driver_info?.phone
            });
          }
        } else if (res.tapIndex == 1) {
          if (authStore.isLoggedIn) {
            uni.navigateTo({
              url: '/pages/cs/cs'
            });
          } else {
            uni.navigateTo({
              url: '/pages/auth/login'
            });
          }
        }
      } else {
        if (res.tapIndex == 0) {
          if (authStore.isLoggedIn) {
            uni.navigateTo({
              url: '/pages/cs/cs'
            });
          } else {
            uni.navigateTo({
              url: '/pages/auth/login'
            });
          }
        }
      }
    }
  });
}

async function handleCancel() {
  if (orderInfo.value?.actual_order_status == 'WAIT_PAY') {
    // 未支付直接取消
    const res = await cancelOrder(orderInfo.value?.order_sn, true);
    if (res.code == 0) {
      await getOrderInfo();
    } else {
      uni.showToast({
        title: res.message,
        icon: 'none'
      });
    }
  } else {
    router.to(RouteMap.carOrderRefund, { orderSn: orderInfo.value?.order_sn, from: 'tripDetail' });
  }
}

function showBigImage(val: string) {
  uni.previewImage({
    urls: [val]
  });
}

function contactKf() {
  if (authStore.isLoggedIn) {
    uni.navigateTo({
      url: '/pages/cs/cs'
    });
  } else {
    uni.navigateTo({
      url: '/pages/auth/login'
    });
  }
}

onShow(async () => {
  await getOrderInfo();
});

onLoad(async (options) => {
  orderSn.value = options!.orderSn;
});
</script>

<template>
  <view class="order-details-contain">
    <uni-nav-bar
      v-if="isWechat()"
      :border="false"
      :title="t('LTKey_trip')"
      background-color="#FF5A60"
      color="#fff"
      fixed
      left-icon="left"
      status-bar
      @click-left="router.back"
    />
    <view v-if="orderInfo?.actual_order_status == 'WAIT_PAY'" class="order-details-contain-header">
      <view class="order-details-contain-header-t">
        <image src="/static/order_details_wait.png" />
        <view class="order-details-contain-header-t-v">
          <view>{{ t('LOKey_orderToPay') }}</view>
          <view>
            {{
              t('LOKey_orderPayBeforeAt', {
                time: format(Date.now() + Math.abs(orderInfo?.count_down), 'HH:mm:ss')
              })
            }}
          </view>
        </view>
      </view>
    </view>
    <view
      v-else-if="orderInfo?.actual_order_status == 'CANCEL'"
      class="order-details-contain-header"
    >
      <view class="order-details-contain-header-t">
        <image
          src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_order_cancel.png"
        />
        <view class="order-details-contain-header-t-v">
          <view>{{ t('LOKey_orderCancel') }}</view>
          <view>{{ t('DiningPreOrderCancelled') }}</view>
        </view>
      </view>
    </view>
    <view
      v-else-if="orderInfo?.actual_order_status == 'WAIT_DISPATCH'"
      class="order-details-contain-header pb130"
    >
      <view class="order-details-contain-header-t">
        <image
          src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_order_success.png"
        />
        <view class="order-details-contain-header-t-v">
          <view>{{ t('TransfeOrderPaySuccess') }}</view>
          <view>{{ t('TransfeOrderPei') }}</view>
        </view>
      </view>
      <view class="order-details-contain-header-b">
        <view>
          {{ t('DiningDetailsGoodCancelPolicy') }}
          <text>{{ t('LRKey_cancelOrderTip', { date: orderInfo?.free_cancel_time }) }}</text>
        </view>
      </view>
    </view>
    <view
      v-else-if="orderInfo?.actual_order_status == 'OVERDUE'"
      class="order-details-contain-header"
    >
      <view class="order-details-contain-header-t">
        <image
          src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_order_overdue.png"
        />
        <view class="order-details-contain-header-t-v">
          <view>{{ t('DiningPreOrderAlreadyOverdue') }}</view>
          <view>{{ t('TransferMu') }}</view>
        </view>
      </view>
    </view>
    <view
      v-else-if="orderInfo?.actual_order_status == 'ORDER_SUCCESS'"
      class="order-details-contain-header pb130"
    >
      <view class="order-details-contain-header-t">
        <image
          src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_order_success.png"
        />
        <view class="order-details-contain-header-t-v">
          <view>{{ t('TransfeOrderSuccess') }}</view>
          <view v-if="orderInfo?.order_type == 'CRS'">{{ t('TransfeOrderJie') }}！</view>
          <view v-else>{{ t('TransferScan') }}</view>
        </view>
      </view>
      <view class="order-details-contain-header-b">
        <view>
          {{ t('DiningDetailsGoodCancelPolicy') }}
          <text>{{ t('LRKey_cancelOrderTip', { date: orderInfo?.free_cancel_time }) }}</text>
        </view>
      </view>
    </view>
    <view
      v-else-if="orderInfo?.actual_order_status == 'COMPLETE'"
      class="order-details-contain-header"
    >
      <view class="order-details-contain-header-t">
        <image
          src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_order_success.png"
        />
        <view class="order-details-contain-header-t-v">
          <view>{{ t('OrderListComplete') }}</view>
          <view>{{ t('transferComplete') }}</view>
        </view>
      </view>
    </view>

    <view
      :class="
        orderInfo?.actual_order_status == 'WAIT_DISPATCH' ||
        orderInfo?.actual_order_status == 'ORDER_SUCCESS'
          ? 'mt-100'
          : ''
      "
      class="order-details-contain-content"
    >
      <view class="order-details-contain-content-bookingInfo">
        <view class="order-details-contain-content-bookingInfo-car">
          <view class="order-details-contain-content-bookingInfo-car-img">
            <image
              :src="
                orderInfo?.order_type == 'CRS'
                  ? orderInfo?.service_info.images
                    ? orderInfo?.service_info.images
                    : 'https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_list_noimage.png'
                  : 'https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_list_noimage.png'
              "
            />
            <view :class="orderInfo?.order_type == 'CRS' ? '' : 'innn'">
              {{ orderInfo?.order_type == 'CRS' ? t('TransferHouseSelf') : 'INNN' }}
            </view>
          </view>
          <view class="order-details-contain-content-bookingInfo-car-info">
            <view>
              {{
                orderInfo?.service_type == 'PICKUP'
                  ? t('TransferPickAirport')
                  : t('TransferOrderPickCar')
              }}
            </view>
            <view>
              <image
                src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_checkout_car.png"
              />
              <text>
                {{
                  orderInfo?.order_type == 'CRS'
                    ? orderInfo?.service_info.car_type_name
                    : t('TransferCarInnnPackageMsg')
                }}
              </text>
              <image
                v-if="orderInfo?.order_type == 'CRS'"
                src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_checkout_people.png"
              />
              <text v-if="orderInfo?.order_type == 'CRS'">
                {{ orderInfo?.service_info.passenger_num }}
              </text>
              <image
                src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_checkout_package.png"
              />
              <text class="info">
                {{
                  orderInfo?.order_type == 'CRS'
                    ? orderInfo?.service_info.max_package_num
                    : orderInfo?.innn_info.total_package_num
                }}
              </text>
              <image
                src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_list_tips.png"
                @click="handleOpenCarPackageTips"
              />
            </view>
          </view>
        </view>
        <view class="order-details-contain-content-bookingInfo-address">
          <view class="order-details-contain-content-bookingInfo-address-list">
            <view class="order-details-contain-content-bookingInfo-address-list-item">
              <view class="order-details-contain-content-bookingInfo-address-list-item-top">
                <image
                  src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_list_start.png"
                />
                <view>{{ orderInfo?.start_address }}</view>
              </view>
              <view class="order-details-contain-content-bookingInfo-address-list-item-line"></view>
            </view>
            <view class="order-details-contain-content-bookingInfo-address-list-item">
              <view class="order-details-contain-content-bookingInfo-address-list-item-top">
                <image
                  src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_list_end.png"
                />
                <view>{{ orderInfo?.end_address }}</view>
              </view>
            </view>
            <view class="order-details-contain-content-bookingInfo-address-list-item">
              <view class="order-details-contain-content-bookingInfo-address-list-item-top">
                <image src="/static/icon_order_detail_time.png" />
                {{
                  t('TransferCarTimeInfo', {
                    date: orderInfo?.book_date,
                    time: orderInfo?.book_time
                  })
                }}
              </view>
              <view
                v-if="orderInfo?.order_type == 'CRS'"
                class="order-details-contain-content-bookingInfo-address-list-item-tips"
              >
                {{
                  t('TransfeOrderDetail', {
                    km: orderInfo?.service_info.distance,
                    min: orderInfo?.service_info.use_time
                  })
                }}
              </view>
            </view>
          </view>
        </view>
      </view>

      <view
        v-if="orderInfo?.order_type == 'INNN' && orderInfo?.actual_order_status == 'ORDER_SUCCESS'"
        class="order-details-contain-content-qrcode"
        @click="openQrcodePopup"
      >
        <view>{{ t('TransferScanNumber') }}</view>
        <view>
          <image
            src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_order_qrcode.png"
          />
          <image
            src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_list_arrow_right.png"
          />
        </view>
      </view>

      <view
        v-if="orderInfo?.order_type == 'INNN' && orderInfo?.actual_order_status == 'ORDER_SUCCESS'"
        class="order-details-contain-content-checkout"
      >
        <view class="order-details-contain-content-checkout-title">{{ t('TransferReceive') }}</view>
        <view class="order-details-contain-content-checkout-tips">
          {{ t('TransferReceiveDetail') }}
        </view>
        <view class="order-details-contain-content-checkout-img">
          <view class="order-details-contain-content-checkout-img-t">
            <image
              src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/order_detail_t1_checkout_small.png"
              @click="
                showBigImage(
                  'https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/dbgxT1.png'
                )
              "
            />
            <view>{{ t('TransferTone') }}</view>
          </view>
          <view class="order-details-contain-content-checkout-img-t">
            <image
              src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/order_detail_t2_checkout_small.png"
              @click="
                showBigImage(
                  'https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/dbgxT2.png'
                )
              "
            />
            <view>{{ t('TransferTtwo') }}</view>
          </view>
        </view>
      </view>

      <view
        v-if="
          orderInfo?.order_type == 'CRS' &&
          (orderInfo?.actual_order_status == 'ORDER_SUCCESS' ||
            orderInfo?.actual_order_status == 'COMPLETE')
        "
        class="order-details-contain-content-driver"
      >
        <view class="order-details-contain-content-driver-t">
          <image
            :src="
              orderInfo?.driver_info?.photo
                ? orderInfo?.driver_info?.photo
                : 'https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/driver_no_image.png'
            "
          />
          <view class="order-details-contain-content-driver-t-info">
            <view class="order-details-contain-content-driver-t-info-title">
              {{ t('TransfeOrderLeaderDetail') }}
              <view @click="contactDriver">{{ t('TransfeOrderLeaderContact') }}</view>
            </view>
            <view class="order-details-contain-content-driver-t-info-cont">
              <view>
                {{ t('TransfeOrderLeader') }}：{{
                  orderInfo?.driver_info?.nickname ? orderInfo?.driver_info?.nickname : '--'
                }}
              </view>
              <view>
                {{ t('LTKey_tripCheckinPhone')
                }}{{
                  orderInfo?.driver_info?.phone
                    ? orderInfo?.driver_info?.phone_area + orderInfo?.driver_info?.phone
                    : '--'
                }}
              </view>
            </view>
          </view>
        </view>
        <view class="order-details-contain-content-driver-b">
          {{ t('TransfeOrderLeaderService') }}。
        </view>
      </view>

      <view
        v-if="
          orderInfo?.order_type == 'CRS' &&
          orderInfo?.process.length > 0 &&
          orderInfo?.actual_order_status != 'CANCEL' &&
          orderInfo?.actual_order_status != 'OVERDUE'
        "
        class="order-details-contain-content-process"
      >
        <view class="order-details-contain-content-process-title">
          {{ t('TransfeOrderLeaderServiceProcess') }}
        </view>
        <view class="order-details-contain-content-process-v">
          <view
            v-for="(item, index) in orderInfo?.process"
            :key="index"
            :class="
              index == 0 || index < processActiveStep - 1
                ? 'pass'
                : index == processActiveStep - 1
                  ? 'active'
                  : ''
            "
            class="order-details-contain-content-process-v-item"
          >
            <view class="order-details-contain-content-process-v-item-top">
              <view class="order-details-contain-content-process-v-item-top-icon"></view>
              <view
                v-if="item.actionWay == 'DISPATCH' || item.actionWay == 'RECEIVE'"
                class="order-details-contain-content-process-v-item-top-txt"
              >
                {{ t('TransfeDriverReceive') }}
              </view>
              <view
                v-else-if="
                  item.actionWay == 'RE_DISPATCH' ||
                  item.actionWay == 'RE_RECEIVE' ||
                  item.actionWay == 'TRANSFER'
                "
                class="order-details-contain-content-process-v-item-top-txt"
              >
                {{ t('TransfeDriverReReceive') }}
              </view>
              <view
                v-else-if="item.actionWay == 'RETURN'"
                class="order-details-contain-content-process-v-item-top-txt"
              >
                {{ t('TransfeDriverReturn') }}
              </view>
              <view
                v-else-if="item.actionWay == 'OUT'"
                class="order-details-contain-content-process-v-item-top-txt"
              >
                {{ t('TransfeDriverOut') }}
              </view>
              <view
                v-else-if="item.actionWay == 'SERVING'"
                class="order-details-contain-content-process-v-item-top-txt"
              >
                {{ t('TransfeDriverArrival') }}
              </view>
              <view
                v-else-if="item.actionWay == 'DONE'"
                class="order-details-contain-content-process-v-item-top-txt"
              >
                {{ t('TransfeDriverEnd') }}
              </view>
            </view>
            <view class="order-details-contain-content-process-v-item-bottom">
              <view class="order-details-contain-content-process-v-item-bottom-time">
                {{ item.time }}
              </view>
              <scroll-view
                v-if="item.images"
                class="order-details-contain-content-process-v-item-bottom-scroll"
                scroll-x="true"
              >
                <image
                  v-for="(item1, index1) in item.images.split(',')"
                  :key="index1"
                  :src="item1"
                />
              </scroll-view>
            </view>
            <view
              v-if="index != orderInfo?.process.length - 1"
              class="order-details-contain-content-process-v-item-line"
            ></view>
          </view>
        </view>
      </view>

      <view class="order-details-contain-content-order">
        <view class="order-details-contain-content-order-item">
          <view class="order-details-contain-content-order-item-title">
            <image
              src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_car_trips_booker.png"
            />
            {{ t('LTKey_tripCheckinContact') }}
          </view>
          <view class="order-details-contain-content-order-item-cont">
            <view>
              {{ t('LTKey_tripCheckinContactName')
              }}{{ orderInfo?.booking_name ? orderInfo?.booking_name : '--' }}
            </view>
            <view>
              {{ t('LTKey_tripCheckinPhone')
              }}{{ orderInfo?.phone_area ? orderInfo?.phone_area : '--' }}
              {{ orderInfo?.booking_mobile ? orderInfo?.booking_mobile : '--' }}
            </view>
            <view>
              {{ t('LTKey_tripCheckinEmail')
              }}{{ orderInfo?.booking_email ? orderInfo?.booking_email : '--' }}m
            </view>
          </view>
        </view>
        <view class="order-details-contain-content-order-item">
          <view class="order-details-contain-content-order-item-title">
            <image
              src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_car_trips_order.png"
            />
            {{ t('LTKey_tripCheckinOrderInfo') }}
          </view>
          <view class="order-details-contain-content-order-item-cont">
            <view>
              {{ t('LRKey_orderNo') }}：{{ orderInfo?.order_sn }}
              <text @click="copyOrderNo">{{ t('LRKey_copy') }}</text>
            </view>
            <view>{{ t('LTKey_tripCheckinOrderTime') }}{{ orderInfo?.create_order_time }}</view>
          </view>
        </view>
        <view
          class="order-details-contain-content-order-btn"
          @click="router.to(RouteMap.carOrderDetail, { orderSn })"
        >
          {{ t('LTKey_tripCheckinOrderDetail') }}
        </view>
      </view>
    </view>

    <view class="order-details-contain-bottom1">
      <view
        v-if="
          orderInfo?.actual_order_status === CarOrderStatus.ORDER_SUCCESS &&
          orderInfo?.order_status === CarOrderStatus.WAIT_SERVE
        "
        class="order-details-contain-bottom1-v"
        @click="handleCancel"
      >
        {{ t('tripCancelOrder') }}
      </view>
      <view
        v-if="
          orderInfo?.order_type == 'CRS' &&
          orderInfo?.actual_order_status === CarOrderStatus.ORDER_SUCCESS &&
          orderInfo?.order_status === CarOrderStatus.WAIT_SERVE
        "
        class="order-details-contain-bottom1-v"
        @click="contactDriver"
      >
        {{ t('TransfeOrderLeaderContact') }}
        <view></view>
      </view>
      <view
        v-if="
          orderInfo?.actual_order_status === CarOrderStatus.ORDER_SUCCESS ||
          orderInfo?.order_status === CarOrderStatus.WAIT_SERVE
        "
        class="order-details-contain-bottom1-v"
        @click="contactKf"
      >
        {{ t('LKey_onlineService') }}
      </view>
      <view
        v-if="
          orderInfo?.order_status === CarOrderStatus.DONE ||
          orderInfo?.order_status == CarOrderStatus.CANCEL ||
          orderInfo?.order_status == CarOrderStatus.OVERDUE
        "
        class="order-details-contain-bottom1-v"
        @click="router.to(RouteMap.carIndex, {}, true)"
      >
        {{ t('DiningPreOrderBookAgain') }}
      </view>
    </view>
  </view>

  <apt-car-package-tips ref="carPackageTipsRef" />

  <apt-car-order-package
    ref="carOrderPackageRef"
    :extra-num="orderInfo?.order_type == 'INNN' ? orderInfo?.innn_info?.extra_package_num : 0"
    :free-num="orderInfo?.order_type == 'INNN' ? orderInfo?.innn_info?.free_package_num : 0"
    :total-num="orderInfo?.order_type == 'INNN' ? orderInfo?.innn_info?.total_package_num : 0"
  />

  <apt-car-refund-detail
    ref="carRefundDetailRef"
    :order-sn="orderInfo?.order_sn ? orderInfo?.order_sn : ''"
  />

  <uni-popup ref="qrcodePopupRef" type="center" @maskClick="handleCloseQrcodePopup">
    <uv-qrcode
      ref="qrcodeRef"
      :options="qrcodeOptions"
      :start="false"
      :value="orderInfo?.order_type == 'INNN' ? orderInfo?.innn_info?.qrcode_info : 'test'"
    ></uv-qrcode>
  </uni-popup>
</template>

<style lang="scss" scoped>
.order-details-contain {
  padding-bottom: 204rpx;
  padding-bottom: calc(constant(safe-area-inset-bottom) + 204rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 204rpx);

  &-header {
    background: #ff5a60;
    padding: 12rpx 30rpx 60rpx;

    &.pb130 {
      padding-bottom: 130rpx;
    }

    &-t {
      align-items: center;
      display: flex;
      margin-bottom: 40rpx;

      image {
        display: block;
        height: 72rpx;
        margin-right: 16rpx;
        width: 72rpx;
      }

      &-v {
        view {
          &:first-child {
            color: #ffffff;
            font-size: 36rpx;
            font-weight: 500;
            line-height: 50rpx;
          }

          &:last-child {
            color: #ffffff;
            font-size: 24rpx;
            font-weight: 400;
            line-height: 34rpx;
          }
        }
      }
    }

    &-b {
      align-items: center;
      background: #fffbf3;
      border-radius: 20rpx;
      display: flex;
      height: 112rpx;
      justify-content: space-between;
      padding: 0 24rpx;

      view {
        &:first-child {
          align-items: center;
          color: #3d3d3d;
          display: flex;
          font-size: 28rpx;
          font-weight: 500;
          line-height: 40rpx;

          text {
            color: #3d3d3d;
            font-size: 24rpx;
            font-weight: 400;
            line-height: 34rpx;
            margin-left: 16rpx;
          }
        }
      }
    }
  }

  &-content {
    margin-top: -66rpx;

    &.mt-100 {
      margin-top: -100rpx;
    }

    &-refund {
      background: #ffffff;
      border-radius: 20rpx;
      margin-bottom: 20rpx;
      padding: 32rpx 32rpx 56rpx;

      &-t {
        border-bottom: 1px solid #f4f4f4;
        padding-bottom: 30rpx;

        &-l {
          align-items: center;
          display: flex;

          &-t1 {
            color: #3d3d3d;
            font-size: 24rpx;
            font-weight: 500;
            line-height: 36rpx;
            margin-right: 4rpx;
          }

          &-t2 {
            color: #d13820;
            font-size: 36rpx;
            font-weight: 500;
            line-height: 36rpx;

            text {
              font-size: 24rpx;
            }
          }
        }

        &-r {
          align-items: center;
          display: flex;
          margin-top: 18rpx;

          text {
            color: #999999;
            font-size: 22rpx;
            font-weight: 400;
            line-height: 24rpx;
          }

          view {
            align-items: center;
            color: #999999;
            display: flex;
            font-size: 22rpx;
            font-weight: 400;
            line-height: 24rpx;
            margin-left: 16rpx;

            image {
              display: block;
              height: 28rpx;
              margin-right: 4rpx;
              width: 28rpx;
            }
          }
        }
      }

      &-b {
        color: #999999;
        font-size: 22rpx;
        font-weight: 400;
        line-height: 24rpx;
        padding-top: 32rpx;

        text {
          color: #006ff6;

          &.overdue {
            color: #d13820;
          }
        }
      }
    }

    &-bookingInfo {
      background: #ffffff;
      border-radius: 20rpx;
      margin-bottom: 20rpx;
      padding: 32rpx;

      &-car {
        align-items: center;
        border-bottom: 1px solid #f4f4f4;
        display: flex;
        padding-bottom: 34rpx;

        &-img {
          position: relative;

          image {
            display: block;
            height: 120rpx;
            width: 180rpx;
          }

          view {
            background: #12c584;
            border-radius: 4rpx;
            color: #ffffff;
            font-size: 18rpx;
            font-weight: 500;
            left: 0;
            line-height: 26rpx;
            padding: 2rpx 4rpx;
            position: absolute;
            top: 0;

            &.innn {
              background: #fc752f;
            }
          }
        }

        &-info {
          margin-left: 20rpx;

          view {
            &:first-child {
              color: #3d3d3d;
              font-size: 32rpx;
              font-weight: 500;
              line-height: 44rpx;
            }

            &:last-child {
              align-items: center;
              display: flex;
              margin-top: 12rpx;

              image {
                display: block;
                height: 24rpx;
                width: 24rpx;
              }

              text {
                color: #3d3d3d;
                font-size: 24rpx;
                font-weight: 400;
                line-height: 34rpx;
                margin-left: 12rpx;
                margin-right: 20rpx;

                &.info {
                  margin-right: 8rpx;
                }
              }
            }
          }
        }
      }

      &-address {
        padding-top: 30rpx;

        &-list {
          &-item {
            padding-bottom: 32rpx;
            position: relative;

            &:last-child {
              padding-bottom: 0;
            }

            &-top {
              align-items: flex-start;
              display: flex;

              image {
                display: block;
                height: 32rpx;
                margin-right: 12rpx;
                margin-top: 4rpx;
                position: relative;
                width: 32rpx;
                z-index: 1;
              }

              view {
                color: #3d3d3d;
                flex: 1;
                font-size: 28rpx;
                font-weight: 500;
                line-height: 40rpx;
              }
            }

            &-line {
              background: #e7e7e7;
              bottom: -10rpx;
              left: 15rpx;
              position: absolute;
              top: 36rpx;
              width: 2rpx;
            }

            &-tips {
              color: #8c8c8c;
              font-size: 24rpx;
              font-weight: 400;
              line-height: 34rpx;
              margin-top: 8rpx;
              padding-left: 44rpx;
            }
          }
        }
      }

      &-cancel {
        background: #fff3ec;
        border-radius: 6rpx;
        color: #b84c16;
        font-size: 24rpx;
        font-weight: 400;
        height: 64rpx;
        line-height: 64rpx;
        margin-top: 32rpx;
        padding: 0 20rpx;
      }
    }

    &-qrcode {
      align-items: center;
      background: #ffffff;
      border-radius: 20rpx;
      display: flex;
      justify-content: space-between;
      margin-bottom: 20rpx;
      padding: 34rpx 32rpx;

      view {
        &:first-child {
          color: #3d3d3d;
          font-size: 36rpx;
          font-weight: 500;
          line-height: 50rpx;
        }

        &:last-child {
          align-items: center;
          display: flex;

          image {
            display: block;

            &:first-child {
              height: 48rpx;
              width: 48rpx;
            }

            &:last-child {
              height: 28rpx;
              margin-left: 8rpx;
              width: 28rpx;
            }
          }
        }
      }
    }

    &-checkout {
      background: #ffffff;
      border-radius: 20rpx;
      margin-bottom: 20rpx;
      padding: 40rpx 32rpx;

      &-title {
        color: #3d3d3d;
        font-size: 36rpx;
        font-weight: 500;
        line-height: 50rpx;
      }

      &-tips {
        color: #3d3d3d;
        font-size: 28rpx;
        font-weight: 400;
        line-height: 40rpx;
        margin: 32rpx 0;
      }

      &-img {
        align-items: center;
        display: flex;
        justify-content: space-between;

        &-t {
          image {
            display: block;
            height: 152rpx;
            width: 334rpx;
          }

          view {
            color: #3d3d3d;
            font-size: 24rpx;
            font-weight: 500;
            line-height: 34rpx;
            margin-top: 22rpx;
            text-align: center;
          }
        }
      }
    }

    &-driver {
      background: #ffffff;
      border-radius: 20rpx;
      margin-bottom: 20rpx;
      padding: 40rpx 32rpx;

      &-t {
        display: flex;

        image {
          display: block;
          height: 174rpx;
          width: 128rpx;
        }

        &-info {
          display: flex;
          flex: 1;
          flex-direction: column;
          justify-content: space-between;
          margin-left: 20rpx;

          &-title {
            align-items: center;
            color: #3d3d3d;
            display: flex;
            font-size: 36rpx;
            font-weight: 500;
            justify-content: space-between;
            line-height: 50rpx;
            margin-top: 10rpx;

            view {
              color: #51668f;
              font-size: 24rpx;
              font-weight: 500;
              line-height: 34rpx;
            }
          }

          &-cont {
            view {
              &:first-child {
                color: #3d3d3d;
                font-size: 28rpx;
                font-weight: 400;
                line-height: 40rpx;
              }

              &:last-child {
                color: #3d3d3d;
                font-size: 28rpx;
                font-weight: 400;
                line-height: 40rpx;
                margin-top: 6rpx;
              }
            }
          }
        }
      }

      &-b {
        background: #f4f4f4;
        border-radius: 8rpx;
        color: #979797;
        font-size: 22rpx;
        font-weight: 400;
        line-height: 40rpx;
        margin-top: 22rpx;
        padding-left: 16rpx;
      }
    }

    &-process {
      background: #ffffff;
      border-radius: 20rpx;
      margin-bottom: 20rpx;
      padding: 40rpx 32rpx;

      &-title {
        color: #3d3d3d;
        font-size: 36rpx;
        font-weight: 500;
        line-height: 50rpx;
      }

      &-v {
        margin-top: 32rpx;

        &-item {
          padding-bottom: 32rpx;
          position: relative;

          &:last-child {
            padding-bottom: 0;
          }

          &-top {
            align-items: flex-start;
            display: flex;

            &-icon {
              background: #ffffff;
              border: 4rpx solid #d8d8d8;
              border-radius: 100%;
              height: 24rpx;
              margin-right: 20rpx;
              margin-top: 8rpx;
              position: relative;
              width: 24rpx;
              z-index: 1;
            }

            &-txt {
              color: #979797;
              flex: 1;
              font-size: 28rpx;
              font-weight: 400;
              line-height: 40rpx;
            }
          }

          &-bottom {
            padding-left: 44rpx;
            white-space: nowrap;

            &-time {
              color: #979797;
              font-size: 24rpx;
              font-weight: 400;
              line-height: 34rpx;
              margin-top: 6rpx;
            }

            &-scroll {
              margin-bottom: 20rpx;
              margin-top: 16rpx;

              image {
                border-radius: 8rpx;
                display: inline-block;
                height: 140rpx;
                margin-right: 20rpx;
                width: calc((100% - 40rpx) / 3);

                &:last-child {
                  margin-right: 0;
                }
              }
            }
          }

          &.pass {
            .order-details-contain-content-process-v-item-top {
              &-icon {
                border-color: #2bbaae;
              }

              &-txt {
                color: #3d3d3d;
              }
            }
          }

          &.active {
            .order-details-contain-content-process-v-item-top {
              &-icon {
                background: #ff5a60;
                border-color: #ffe1e2;
              }

              &-txt {
                color: #3d3d3d;
                font-weight: 500;
              }
            }
          }

          &-line {
            background: #e7e7e7;
            bottom: -10rpx;
            left: 11rpx;
            position: absolute;
            top: 30rpx;
            width: 2rpx;
          }
        }
      }
    }

    &-order {
      background: #ffffff;
      border-radius: 20rpx;
      margin-bottom: 20rpx;
      padding: 48rpx 32rpx 52rpx;

      &-item {
        margin-top: 48rpx;

        &:first-child {
          margin-top: 0;
        }

        &-title {
          align-items: center;
          color: #3d3d3d;
          display: flex;
          font-size: 32rpx;
          font-weight: 500;
          line-height: 44rpx;

          image {
            display: block;
            height: 40rpx;
            margin-right: 16rpx;
            width: 40rpx;
          }
        }

        &-cont {
          margin-top: 4rpx;
          padding-left: 56rpx;

          view {
            align-items: center;
            color: #3d3d3d;
            display: flex;
            font-size: 24rpx;
            font-weight: 400;
            line-height: 34rpx;
            margin-top: 12rpx;

            text {
              color: #adaeb0;
              margin-left: 20rpx;
            }
          }
        }
      }

      &-btn {
        border: 1px solid #c4c4c4;
        border-radius: 16rpx;
        color: #3d3d3d;
        display: inline-block;
        font-size: 24rpx;
        font-weight: 500;
        height: 64rpx;
        line-height: 64rpx;
        margin-left: 56rpx;
        margin-top: 16rpx;
        padding: 0 28rpx;
      }
    }
  }

  &-bottom {
    align-items: center;
    background: #ffffff;
    bottom: 0;
    box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(99, 99, 99, 0.2);
    display: flex;
    justify-content: space-between;
    left: 0;
    padding: 16rpx 32rpx;
    padding-bottom: 16rpx;
    padding-bottom: calc(constant(safe-area-inset-bottom) + 16rpx);
    padding-bottom: calc(env(safe-area-inset-bottom) + 16rpx);
    position: fixed;
    right: 0;
    z-index: 10;

    &-l {
      align-items: center;
      color: #d13820;
      display: flex;
      font-size: 36rpx;
      font-weight: 500;
      line-height: 50rpx;

      text {
        color: #3d3d3d;
        font-size: 20rpx;
        font-weight: 400;
        line-height: 28rpx;
      }
    }

    &-r {
      align-items: center;
      display: flex;

      view {
        &:first-child {
          align-items: center;
          color: #979797;
          display: flex;
          font-size: 20rpx;
          font-weight: 400;
          line-height: 28rpx;
          margin-right: 6rpx;

          image {
            display: block;
            height: 32rpx;
            width: 32rpx;
          }
        }

        &:last-child {
          background: #ff5a60;
          border-radius: 8rpx;
          color: #ffffff;
          font-size: 28rpx;
          font-weight: 500;
          height: 72rpx;
          line-height: 72rpx;
          margin-left: 24rpx;
          padding: 0 32rpx;
        }
      }
    }
  }
}

.order-details-contain-bottom1 {
  align-items: center;
  background: #ffffff;
  bottom: 0;
  box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(99, 99, 99, 0.2);
  display: flex;
  justify-content: flex-end;
  left: 0;
  padding: 16rpx 32rpx;
  padding-bottom: 16rpx;
  padding-bottom: calc(constant(safe-area-inset-bottom) + 16rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 16rpx);
  position: fixed;
  right: 0;
  z-index: 10;

  &-v {
    background: #ffffff;
    border: 1px solid #f4f4f4;
    border-radius: 8rpx;
    color: #3d3d3d;
    font-size: 28rpx;
    font-weight: 500;
    height: 72rpx;
    line-height: 72rpx;
    margin-left: 20rpx;
    padding: 0 32rpx;
    position: relative;

    view {
      background: #ff5a60;
      border-radius: 100%;
      height: 16rpx;
      position: absolute;
      right: 18rpx;
      top: 10rpx;
      width: 16rpx;
    }
  }
}

.car-checkout-price-popup {
  background-color: white;
  border-top-left-radius: 28rpx;
  border-top-right-radius: 28rpx;
  display: flex;
  flex-direction: column;
  padding-bottom: 104rpx;
  padding-bottom: calc(constant(safe-area-inset-bottom) + 104rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 104rpx);

  &__head {
    display: flex;
    justify-content: center;
    margin-bottom: 28rpx;
    padding-top: 44rpx;
    position: relative;
  }

  &__close-btn {
    height: 28rpx;
    position: absolute;
    right: 26rpx;
    top: 56rpx;
    width: 28rpx;
  }

  &__body {
    flex: 1;
    padding: 0 24rpx;
  }
}

.car-checkout-price-contain {
  padding-bottom: 64rpx;

  &-item {
    margin-bottom: 30rpx;

    &:last-child {
      margin-bottom: 0;
    }

    &-title {
      color: #3d3d3d;
      font-size: 28rpx;
      font-weight: 500;
      line-height: 40rpx;
    }

    &-content {
      &-v {
        align-items: center;
        display: flex;
        justify-content: space-between;
        margin-top: 20rpx;

        &-t1 {
          color: #979797;
          font-size: 24rpx;
          font-weight: 400;
          line-height: 34rpx;
        }

        &-t2 {
          color: #3d3d3d;
          font-size: 24rpx;
          font-weight: 600;
          line-height: 34rpx;

          &.free {
            text-decoration: line-through;
          }
        }
      }
    }
  }
}
</style>
